<template>
	<!-- 滑动验证弹窗 -->
	<view class="slide_model" v-if="showModal">
		<view class="slide_wrapper">
			<!-- 拼图背景 -->
			<image src="/static/logo.jpg" mode="aspectFit"></image>
			<!-- 滑块 -->
			<view class="slide">
				<view class="verify-A" :style="{left: verifyB+'px'}"></view>
				<view class="verify-B" :style="{left: translateX+'px',backgroundPosition:(-1*verifyB+20)+'px -220rpx'}"></view>
				<view class="block" :style="{transform:`translateX(${translateX}px)`}" 
					@touchmove="slide_hmove" @touchend="slide_chend">
					<text class="cuIcon-pullright"></text>
				</view>
				<text class="note">拖动左边滑块完成上方拼图</text>
			</view>
			<!-- 底部按钮 -->
			<view class="footGuil">
				<view class="cuIcon-roundclose" @click="hideModal"></view>
				<view class="cuIcon-refresh margin-left" @click="reVerifyB"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uni-sliding-block",
		props:{
			showModal:{
				type:Boolean
			},
			verifyB:{
				type:Number,
			},
		},
		data() {
			return {
				translateX:0,
			};
		},
		methods:{
			hideModal(){
				this.$emit('hideModal',null)
			},
			reVerifyB(){
				this.$emit('reVerifyB',null)
			},
			slide_hmove(e) {
				const touches = e.touches[0];
				let move = touches.clientX-60;
				if(move<0) move = 0;
				if(move>250) move = 250;
				this.translateX = move;
			},
			slide_chend(e) {
				if(Math.abs(this.translateX-this.verifyB)<5){
					this.$emit('verFinish',null)
				}
				this.translateX = 0
			},
		}
	}
</script>

<style lang="less">
/* 拼图滑动验证 */
.slide_model {
  width: 100%;
  height: 100vh;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  .slide_wrapper {
    float: left;
    position: relative;
	z-index: 1;
    width: 90%;
    background-color: #c43434;
  }
  image{
	  width: 500rpx;
	  height: 500rpx;
	  display: block;
	  margin: 0 auto;
  }
  .test{
	  width: 50rpx;
	  height: 50rpx;
	  background-color: wheat;
	  position: absolute;
	  top: 0;
	  left: 0;
  }

  .slide{
	  width: 580rpx;
	  height: 80rpx;
	  background-color: #aa2c2c;
	  position: absolute;
	  bottom: 100rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  border-radius: 10rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  view[class^='verify-']{
	  	  width: 80rpx;
	  	  height: 80rpx;
	  	  background-color: rgba(0, 0, 0, 0.4);
	  	  position: absolute;
	  	  top: -200rpx;
	  	  left: 0;
		  box-shadow: 0 0 30rpx 1rpx #fff; 
		  border-radius: 10rpx;
 	  }
	  view.verify-B{
		  background-color: #aa2c2c;
		  background-image: url('/static/logo.jpg');
		  background-repeat: no-repeat;
		  background-size: 500rpx 500rpx;
		  background-position: -130px -220rpx;
	  }
	  .block{
		  width: 80rpx;
		  height: 80rpx;
		  background-color: white;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  font-size: 44rpx;
		  color: #aa2c2c;
		  border-radius: 10rpx;
		  box-shadow: 0 0 20rpx 1rpx #aa2c2c;
		  transform: translateX(0rpx);
	  }
	  .note{
		  margin-left: 60rpx;
		  font-size: 24rpx;
		  color: #681b1b;
		  font-weight: 600;
	  }
  }
  .footGuil{
	  width: 580rpx;
	  height: 100rpx;
	  margin: 0 auto;
	  background-color: #c43434;
	  font-size: 40rpx;
	  color: #681b1b;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
}

</style>